<template>
    <view>
        <div class="flex-content">
            <nut-form ref="formRef" :model-value="formData">
                <nut-form-item label="头像" prop="user_Nickname" required :rules="[{ required: true, message: '请上传头像' }]">
                    <nut-uploader :url="uploadUrl" accept="image/*" @success="picSucc" maximum="1" multiple>
                    </nut-uploader>
                </nut-form-item>
                <nut-form-item label="昵称" prop="user_Nickname" required :rules="[{ required: true, message: '请填写姓名' }]">
                    <nut-input v-model="formData.user_Nickname" placeholder="请输入昵称" type="text"
                        @blur="customBlurValidate('user_Nickname')" />
                </nut-form-item>
                <nut-form-item label="年龄" prop="user_Age" required :rules="[{ required: true, message: '请填写年龄' }]">
                    <nut-input v-model="formData.user_Age" placeholder="请输入年龄" type="text"
                        @blur="customBlurValidate('user_Age')" />
                </nut-form-item>
                <nut-form-item label="身高" prop="user_Tall" required :rules="[{ required: true, message: '请填写身高' }]">
                    <nut-row>
                        <nut-col :span="21">
                            <nut-input v-model="formData.user_Tall" placeholder="请输入身高" type="text"
                                @blur="customBlurValidate('user_Tall')" />
                        </nut-col>
                        <nut-col :span="3">cm</nut-col>
                    </nut-row>
                </nut-form-item>
                <nut-form-item label="体重" prop="user_Weight" required :rules="[{ required: true, message: '请填写体重' }]">
                    <nut-row>
                        <nut-col :span="21">
                            <nut-input v-model="formData.user_Weight" placeholder="请输入体重" type="text"
                                @blur="customBlurValidate('user_Weight')" />
                        </nut-col>
                        <nut-col :span="3">kg</nut-col>
                    </nut-row>
                </nut-form-item>
                <nut-form-item label="个人标签">
                    <nut-input v-model="formData.user_Nickname" placeholder="请输入个人标签" type="text" />
                </nut-form-item>
                <!-- <div class="flex-content2">
          <div style="display: flex; margin: 5% 0;align-items: center;">
            <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">上传照片</text><text
              style="font-size: 12px;margin-top: 2%;color:#999999">*单张图片不能超过5M</text>
          </div>
          <div style="margin-top:-2%; border-bottom: 1px solid #e6e6e6;"></div>
          <div style="margin:0 1%">
            <nut-uploader :url="uploadUrl" accept="image/*" @success="picSucc" v-model:file-list="defaultFileList"
              maximum="1" multiple>
            </nut-uploader>
          </div>
        </div> -->
                <div class="flex-content2">
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">选择项目</text>
                    </div>
                    <div style="margin-top:-2%; border-bottom: 1px solid #e6e6e6;"></div>
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin:2% 5% 0 5%;font-weight: bold;">娱乐</text>
                        <!-- <div>{{ formData.entertsList }}</div> -->
                    </div>
                    <div>
                        <nut-grid :column-num="3" :border="false">
                            <nut-grid-item v-for="item in enterts">
                                <nut-checkbox-group v-model="formData.enterts">
                                    <nut-checkbox :label="item.value" shape="button"> {{ item.text }} </nut-checkbox>
                                </nut-checkbox-group>
                            </nut-grid-item>
                        </nut-grid>
                    </div>
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">服务</text>
                        <!-- <div>{{ formData.servicesList }}</div> -->
                    </div>
                    <div>
                        <nut-grid :column-num="3" :border="false">
                            <nut-grid-item v-for="item in services">
                                <nut-checkbox-group v-model="formData.services">
                                    <nut-checkbox :label="item.value" shape="button"> {{ item.text }} </nut-checkbox>
                                </nut-checkbox-group>
                            </nut-grid-item>
                        </nut-grid>
                    </div>
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">休闲运动</text>
                        <!-- <div>{{ formData.leisuresList }}</div> -->
                    </div>
                    <div>
                        <nut-grid :column-num="3" :border="false">
                            <nut-grid-item v-for="item in leisures">
                                <nut-checkbox-group v-model="formData.leisures">
                                    <nut-checkbox :label="item.value" shape="button"> {{ item.text }} </nut-checkbox>
                                </nut-checkbox-group>
                            </nut-grid-item>
                        </nut-grid>
                    </div>
                    <div style="display: flex; margin: 5% 0;align-items: center;">
                        <text style="font-size: 16px;margin: 2% 5%;font-weight: bold;">球类运动</text>
                        <!-- <div>{{ formData.ballsList }}</div> -->
                    </div>
                    <div>
                        <nut-grid :column-num="3" :border="false">
                            <nut-grid-item v-for="item in balls">
                                <nut-checkbox-group v-model="formData.balls">
                                    <nut-checkbox :label="item.value" shape="button"> {{ item.text }} </nut-checkbox>
                                </nut-checkbox-group>
                            </nut-grid-item>
                        </nut-grid>
                    </div>
                </div>
                <div style="border-bottom: 1px solid #e6e6e6;"></div>
                <div class="flex-content">
                    <div class="upload-t">上传照片 <span>*单张照片不能超过5M</span></div>
                    <div style="margin: 2% 5%;">
                        <nut-uploader :url="uploadUrl" accept="image/*" @success="picSucc"
                            v-model:file-list="defaultFileList" maximum="1" multiple>
                        </nut-uploader>
                    </div>
                    <div>
                        <div class="tip">*请如是填写个人信息</div>
                        <nut-button size="small" color="#2b35fa" @click="submit" block>提交</nut-button>
                    </div>
                </div>
            </nut-form>
        </div>
    </view>
</template>

<script lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue';
import Taro from '@tarojs/taro';
import { Left } from '@nutui/icons-vue-taro';
import { createUser } from '../../../../api/index'
export default {
    components: {
        Left,
    },
    setup() {
        const confirm = ({ selectedValue, selectedOptions }) => {
            console.log(selectedValue[0], selectedOptions[0])
            state.show = false
        };
        const submit = () => {
            console.log(state.formRef)
            state.formRef?.validate().then(({ valid, errors }) => {
                if (valid) {
                    if (state.formData.enterts.length > 0 && state.formData.services.length && state.formData.leisures.length && state.formData.balls.length) {
                        console.log('success:', state.formData)
                        state.formData.user_ID = state.user.uuid
                        state.formData.user_City = state.formData.city[0]
                        state.formData.user_Enterts = state.formData.enterts.join(",")
                        state.formData.user_Services = state.formData.services.join(",")
                        state.formData.user_Leisures = state.formData.leisures.join(",")
                        state.formData.user_Balls = state.formData.balls.join(",")
                        createUser(state.formData).then(res => {
                            if (res.code == 0) {
                                Taro.showToast({
                                    title: '提交成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                                setTimeout(() => {
                                    jumpTo('/pages/index/index')
                                }, 500)
                            }
                        })
                    } else {
                        console.warn('error:', "请至少选择一个项目")
                        Taro.showToast({
                            title: '请至少选择一个项目',
                            icon: 'error'
                        })
                    }
                } else {
                    console.warn('error:', errors)
                }
            })
        };
        // 失去焦点校验
        const customBlurValidate = (prop) => {
            state.formRef?.validate(prop).then(({ valid, errors }) => {
                if (valid) {
                    console.log('success:', state.formData)
                } else {
                    console.warn('error:', errors)
                }
            })
        };
        const state = reactive({
            formData: {
                user_ID: '',
                user_Nickname: '',
                user_Sex: '',
                user_Age: '',
                user_Tall: '',
                user_Weight: '',
                user_City: '' as any,
                city: [],
                user_Enterts: '',
                user_Services: '',
                user_Leisures: '',
                user_Balls: '',
                enterts: [],
                services: [],
                leisures: [],
                balls: [],
                agreeVal: false
            },
            formRef: null,
            enterts: [
                { text: '宵夜排挡', value: '宵夜排挡' },
                { text: 'K歌泡吧', value: 'K歌泡吧' },
                { text: '密室桌游', value: '密室桌游' },
                { text: '商务聚餐', value: '商务聚餐' },
                { text: '喝茶观影', value: '喝茶观影' },
                { text: '电子竞技', value: '电子竞技' },
                { text: '同城向导', value: '同城向导' },
                { text: '台球助教', value: '台球助教' }
            ],
            services: [
                { text: '探店达人', value: '探店达人' },
                { text: '陪护', value: '陪护' },
                { text: '陪诊', value: '陪诊' },
                { text: '陪拍', value: '陪拍' },
                { text: '礼仪模特', value: '礼仪模特' }
            ],
            leisures: [
                { text: '马术', value: '马术' },
                { text: '瑜伽', value: '瑜伽' },
                { text: '骑行', value: '骑行' },
                { text: '跑步', value: '跑步' },
                { text: '游泳', value: '游泳' },
                { text: '溜冰', value: '溜冰' },
                { text: '钓鱼', value: '钓鱼' },
                { text: '健身', value: '健身' }
            ],
            balls: [
                { text: '足球', value: '足球' },
                { text: '篮球', value: '篮球' },
                { text: '网球', value: '网球' },
                { text: '羽毛球', value: '羽毛球' },
                { text: '乒乓球', value: '乒乓球' },
                { text: '保龄球', value: '保龄球' },
                { text: '高尔夫', value: '高尔夫' }
            ],
            show: false,
            val: '',
            uploadUrl: 'https://xxxxx',
            defaultFileList: [],
            user: {}
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data ? res.data : {}
                    console.log(state.user.uuid)

                }
            })
        })
        const picSucc = (data, option, fileItem) => {
            console.log(JSON.parse(data.data.data).url)
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        return {
            confirm,
            submit,
            customBlurValidate,
            picSucc,
            jumpTo,
            ...toRefs(state)
        };

    }
}
</script>

<style lang="scss">
.flex-content {
    margin: 0 auto;
    align-items: center;
    background: transparent;
    bottom: 0;
    /* 在 H5 模式下将会编译成 margin-bottom: 50px，在小程序模式下则会忽略 */
    margin-bottom: taro-tabbar-height;
}

.flex-content .upload-t {
    font-size: 32rpx;
    margin: 2% 5%;
    font-weight: bold;
}

.flex-content .upload-t span {
    font-weight: normal;
    font-size: 24rpx;
    color: #666;
}

.flex-content .tip {
    font-size: 24rpx;
    color: #666;
    margin: 2% 5%;
}

.flex-content2 {
    margin: 0 auto 0;
    align-items: center;
    background: transparent;
}

.nut-checkbox__button {
    white-space: nowrap;
}

.nut-checkbox.nut-checkbox--button {
    margin: 0;
}
</style>